<template>
  <el-menu
      active-text-color="#f93684"
      class="el-menu-demo"
      mode="horizontal"
      style="height: 100%"
  >
    <el-menu-item index="1">
      <router-link to="/trainingroom/training">全部</router-link>
    </el-menu-item>
    <el-menu-item index="2">
      <router-link to="/trainingroom/creation">我创建的</router-link>
    </el-menu-item>
    <el-menu-item index="3">
      <router-link to="/trainingroom/join">我加入的</router-link>
    </el-menu-item>
    <el-menu-item index="4">
      <router-link to="/trainingroom/class">我的课程</router-link>
    </el-menu-item>
    <el-button
        type="danger"
        round
        style="margin-left: 500px;margin-top: 15px;background-color: #f93684"
        @click="dialogVisible=true"
    >
      创建
    </el-button>
  </el-menu>

  <el-dialog v-model="dialogVisible" title="请打开 中舞网APP 扫码,使用此功能" width="30%" center
             style="width: 260px;font-size: 12px;">
    <div style="margin-left:55px;margin-top: -20px">
      <img src="/src/assets/images/training.jpg" style="width: 100px;margin-bottom: 15px">
    </div>
    <div style="margin-left: 20px;margin-bottom: 5px">扫码此二维码，同样可下载</div>
    <div style="margin-left: 65px;color:#f93684 "> “中舞网APP”</div>

  </el-dialog>
</template>

<script lang="ts" setup>
import {ref} from "vue";

const dialogVisible = ref(false)
</script>
